<template>
  <div class="room-list">
    <div class="date active">
      <div class="item">
        {{ dateInfo.startDate }}
        <span>{{ dateInfo.startDateText }}入住</span>
      </div>
      <div class="item middle">共{{ dateInfo.roomNight }}晚</div>
      <div class="item">
        {{ dateInfo.endDate }}
        <span>{{ dateInfo.endDateText }}离开</span>
      </div>
    </div>

    <div class="room">
      <div class="tip">{{ hotel.remark }}</div>
      <div class="tip bold">{{ hotel.cancelRule }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'RoomInfo' })
defineProps(['hotel', 'dateInfo'])
</script>
<style lang="scss" scoped>
.room-list {
  margin: 0 30rpx;
  background-color: #fff;
  border-radius: 30rpx;
  .date {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 112rpx;
    margin: 0 24rpx;
    .item {
      font-size: 30rpx;
      font-weight: 700;
      color: var(--color1);
      span {
        display: inline-flex;
        align-items: center;
        font-size: 25rpx;
        font-weight: 500;
        color: var(--color4);
      }
    }
    .middle {
      flex: 1;
      font-size: 27rpx;
      font-weight: 500;
      text-align: center;
    }
  }
  .room {
    padding: 0 20rpx 22rpx;
    font-size: 27rpx;
    .tip {
      line-height: 58rpx;
      color: var(--color1);
      &.bold {
        margin-top: 8rpx;
        font-weight: 600;
      }
    }
  }
}
</style>
